.checkbox-grouping {
  display: flex;
  flex-direction: column;
  justify-content: center;

  checkbox {
    @include size(15px, 15px);
    padding-right: 20px;
    // Visibility hidden does not generate change events
    opacity: 0;
  }

  .unavailable-spacing {
    padding-right: 35px;
  }

  .checkbox-group {
    position: relative;
  }

  .checkbox-bg,
  .checkbox-active {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
  }

  .checkbox-bg {
    @include size(16px, 16px);
    border: 1px solid $colorGrey;
  }

  .checkbox-active {
    @include size(10px, 10px);
    background-color: $colorDark;
  }
}
